<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地球3D散点</title>
    <style>
        #globel {
            width: 1370px;
            height: 700px;
        }
    </style>
</head>

<body>
    <div id="globel"></div>
</body>
<script src="js/echarts.min.js"></script>
<script src="js/world.js"></script>
<script src="js/echarts-gl.min.js"></script>
<script type="text/javascript">
    /**
 * @author liang
 * 3D散点图，高度设为0，紧贴球表面，通过大小反映数据量多少
 */

    // 使用 echarts 绘制世界地图的实例作为纹理
    let canvas = document.createElement('canvas');
    let mapChart = echarts.init(canvas, null, {
        width: 4096,
        height: 2048
    });
    let pOp = {
        // 两种方法绘制地图都可以
        geo: {
            map: 'world',
            label: {
                fontSize: 40
            },
            itemStyle: {
                areaColor: '#696969',
                borderColor: '#00FDFF'
            },
            emphasis: {
                itemStyle: {
                    areaColor: '#96CDCD'
                }
            },
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            boundingCoords: [
                [-180, 90],
                [180, -90]
            ]
        },
        backgroundColor: 'rgba(53, 67, 181, 0.5)'
    }
    const randomData = () => {
        let longitude = (Math.random() * 360 - 180).toFixed(6)
        let latitude = (Math.random() * 180 - 90).toFixed(6)
        let value = (Math.random() * 3000).toFixed(2)
        return [longitude, latitude, -1, value]
    }
    let data = []
    for (let i = 0; i < 50; i++) {
        data.push(randomData())
    }
    mapChart.setOption(pOp);
    let option = {
        backgroundColor: '#000',
        tooltip: {
            show: true,
            formatter(d) {
                return '经度：' + d.data[0] + '</br>纬度：' + d.data[1] + '</br>数据量：' + d.data[3]
            }
        },
        visualMap: [{
            // show: false,
            type: 'continuous',
            seriesIndex: 0,
            text: ['scatter3D'],
            textStyle: {
                color: '#333'
            },
            // dimension: 3,
            calculable: true,
            max: 3000,
            inRange: {
                color: ['#87aa66', '#eba438', '#d94d4c'],
                symbolSize: [8, 30]
            }
        }],
        globe: {
            baseTexture: mapChart,
            heightTexture: '/asset/get/s/data-1491889019097-rJQYikcpl.jpg',
            displacementScale: 0.04,
            shading: 'color',
            environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: '#00aaff' // 天空颜色
            }, {
                offset: 0.7, color: '#998866' // 地面颜色
            }, {
                offset: 1, color: '#998866' // 地面颜色
            }], false),
            light: { // 光照阴影
                main: {
                    color: '#fff', // 光照颜色
                    intensity: 1.2, // 光照强度
                    // shadowQuality: 'high', //阴影亮度
                    shadow: false, // 是否显示阴影
                    alpha: 40,
                    beta: -30
                },
                ambient: {
                    intensity: 0.5
                }
            },
            viewControl: {
                alpha: 30,
                beta: 160,
                // targetCoord: [116.46, 39.92],
                autoRotate: true,
                autoRotateAfterStill: 10,
                distance: 150
            },
            layers: [{
                type: 'blend',
                texture: mapChart
            }]
        },
        series: [{
            type: 'scatter3D',
            coordinateSystem: 'globe',
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: false
                }
            },
            blendMode: 'lighter',
            data: data
        }]
    }
    let globel = echarts.init(document.getElementById('globel'));
    globel.setOption(option);

</script>

</html>